<template>
<!--  <nav>
    &lt;!&ndash;  router-link路由  &ndash;&gt;
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/local">LocalView</router-link>
    |
    <router-link to="/slot">MySlotIndexView</router-link>
    |
    <router-link to="/rout">RoutView</router-link>
  </nav>
  <br>
  <br>-->

  <nav>
    <button @click="toHome">首页</button>
    <button @click="toNews">新闻</button>
    <button @click="toLogin">登陆</button>
    <button @click="doForward1">前进</button>
    <button @click="doForward2">前进</button>
    <button @click="doBack1">后退</button>
    <button @click="doBack2">后退</button>
  </nav>

  <!-- 路由出口 -->
  <router-view />

</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
<script>
import Common from "@/components/Common";
export default {
  components: {Common},
  watch: {
    $route(newRouter, oldRouter){
      console.log("路由之前的路径：");
      console.log(oldRouter);
      console.log("路由之后的路径：");
      console.log(newRouter);
      console.log("------------------------------")
    }
  },
  methods: {
    toHome(){
      /*this.$router.push({
        path: "/home/login",
        query:{
          username: "张三",
          password: "000000"
        }
      })*/
      // this.$router.push("/home/reg/大锤/123123/13144565656");
      this.$router.push("/")
    },
    toNews(){
      this.$router.push("/local")
    },
    toLogin(){
      this.$router.push({
        path: "/home/login",
        query:{
          username: "张三",
          password: "000000"
        }
      })
    },
    doForward1(){
      this.$router.forward();
    },
    doForward2(){
      this.$router.go(2)
    },
    doBack1(){
      this.$router.back()
    },
    doBack2(){
      this.$router.go(-2)
    }
  }

}
</script>